<template>
  <div class="cart-body">
    <info :price="80"></info>
    <div v-if="cartList.length==0" class="emptyCart">
      <van-icon name="shopping-cart-o" size="100" class="emptyCart-img"/>
      <div class="emptyCart-title">购物车空空如也</div>
    </div>
    <div v-else>
      <!-- 购物车列表 -->
      <van-checkbox-group v-model="result" :disabled="isEditing">
        <van-checkbox
          :name="item.id"
          v-for="item in cartList"
          :key="item.id"
          @click="itemChecked(item)"
        >
          <van-swipe-cell>
            <van-card
              :num="item.number"
              :price="item.retail_price"
              :title="item.goods_name"
              :thumb="item.list_pic_url"
            />
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
                @click="cartListDel(item.product_id)"
              />
            </template>
          </van-swipe-cell>
          <van-stepper
            v-model="item.number"
            v-show="isEditing"
            @change="Stepper(item)"
          />
        </van-checkbox>
      </van-checkbox-group>
      <!-- //订单栏 -->
      <van-submit-bar
        :price="cartTotal.checkedGoodsAmount * 100"
        button-text="提交订单"
        @submit="onSubmit"
      >
        <van-checkbox v-model="checkedAll" :disabled="isEditing"
          >全选</van-checkbox
        >
        <template #tip>
          累计共<span style="font-weight: bold; font-size: 18px"
            >{{ cartTotal.goodsCount }} </span
          >件商品，可点击
          <van-button
            :type="isEditing ? 'danger' : 'primary'"
            size="small"
            @click="isEditing = !isEditing"
            >{{ isEditing ? "完成编辑" : "编辑" }}</van-button
          >
          按钮进行商品数量修改
        </template>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import info from "@/components/products/info.vue";
import {
  getGartData,
  changeGoodsChecked,
  goodsStepper,
  Cartdel,
} from "@/request/api";
export default {
  components: {
    info,
  },
  data() {
    return {
      result: [],
      //全选
      // checkedAll:true,
      cartList: [],
      cartTotal: "",
      isEditing: false,
    };
  },
  computed: {
    // checkedAll(){
    //   return this.result.length===this.cartList.length
    // }
    checkedAll: {
      get() {
        return this.result.length === this.cartList.length;
      },
      set(val) {
        if (this.isEditing) return;
        // console.log('set',val)
        //全选
        let ids = this.cartList.map((item) => {
          return item.product_id;
        });
        // console.log( ids.join())
        changeGoodsChecked({
          isChecked: val == false ? 0 : 1,
          productIds: ids.join(),
        }).then((res) => {
          console.log(res);
          this.renderData(res.data);
        });
      },
    },
  },
  created() {
    getGartData().then((res) => {
      console.log(res);
      this.renderData(res.data);
    });
  },
  mounted() {},
  methods: {
    onSubmit() {
      console.log("提交订单");
    },
    //封装相同数据的代码
    renderData(data) {
      //每次点击和上次没关系，清空this.result，不然会影响全选
      this.result = [];
      let { cartList, cartTotal } = data;
      this.cartTotal = cartTotal;
      this.cartList = cartList;

      //单选的渲染
      //根据每个项商品的checked的值，来给this.result数据添加内容
      this.cartList.map((item) => {
        // if(item.checked){
        //   this.result.push(item.id)
        // }
        item.checked ? this.result.push(item.id) : "";
      });
    },
    //单选
    itemChecked(item) {
      if (this.isEditing) return;
      // console.log(item)
      changeGoodsChecked({
        isChecked: item.checked == 1 ? 0 : 1,
        productIds: item.product_id.toString(),
      }).then((res) => {
        console.log(res);
        this.renderData(res.data);
      });
    },
    //步行器
    Stepper(item) {
      goodsStepper({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id,
      }).then((res) => {
        this.renderData(res.data);
      });
    },
    //删除购物车
    cartListDel(ids) {
      Cartdel({
        productIds: ids.toString(),
      }).then((res) => {
        this.renderData(res.data);
      });
    },
  },
};
</script>

<style scoped lang="less">
.emptyCart{
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  .emptyCart-title{
    color: #666;
    font-size: .2rem;
  }

}
.van-checkbox-group {
  background-color: #fff;
  padding: 0.1rem;
  .van-checkbox {
    padding-bottom: 0.1rem;
    border-bottom: 1px solid #ccc;
    .van-card {
      background-color: #fff;
    }
  }
}
/deep/.van-checkbox__label {
  flex: 1;
}
.van-submit-bar__tip {
  display: flex;
  align-items: center;
}
.van-stepper {
  text-align: right;
}
.delete-button {
  height: 100%;
}
</style>
